<template>
  <view class="bg min100 pb-20">
    <!-- 头部 -->
    <swiper v-if="goodsDetail && goodsDetail!=''" autoplay indicator-dots='true' indicator-color="rgba(0, 0, 0, .3)"
            indicator-active-color="white" class="u-skeleton-fillet">
      <swiper-item v-for="(value,index) in goodsDetail.thumb_url" :key="index">
        <img :src="value.img_Url" class="slide-image" mode="aspectFill"/>
      </swiper-item>
    </swiper>

    <view class="name_wrapper" style="text-align: center">
      <view class="name u-skeleton-fillet" @click="toEditShop">
        {{ goodsDetail.name }}
      </view>
      <view class="name u-skeleton-fillet" v-if="!goodsDetail || goodsDetail==''">
        [编辑商家信息]
      </view>
    </view>

    <empty v-if="couponList.length==0" text="暂无订单"></empty>
    <view class="coupon_box">
<!--      <couponPage v-for="(item, index) in couponList" :key="index" v-bind:item="item" theme="#ff0000"></couponPage>-->
      <view class="coupon-item" v-for="(item, index) in couponList" :key="index">
        <view class="coupon-money" @click="toPublish(item.id)">
          <view class="nick">{{item.name}}</view>
          <view class="layof" :style="{color:'#ff0001'}">￥{{item.money}}</view>
          <view class="end_time">{{item.end_time}}前使用</view>
          <view class="mt-10">
            <view class="tit" v-if="item.type==='satisfy'">满{{item.money}}减{{item.satisfy_money}}元</view>
            <view class="demand">总数: {{item.num}} 张</view>
          </view>
        </view>
        <view class="get-btn" v-if="item.status===1" :style="{color:'#ff0001', borderColor:'#ff0001', background:'#ffffff'}" @click="changeStatus(item.id)">下架</view>
        <view class="get-btn" v-if="item.status===0" :style="{color:'#ff9000', borderColor:'#ff9000', background:'#ffffff'}" @click="changeStatus(item.id)">上架</view>
      </view>
    </view>
    <u-loadmore v-show="coupon[0].list.length>9" :status="status" icon-type="flower" bg-color="transperant"
                margin-top="30" margin-bottom="30"/>
    <image @click="toPublish('')" type="1" src="../../static/sf-pub.png"
           style="width: 100rpx;height: 100rpx;position: fixed;bottom: 200rpx;right: 20rpx;"
           mode=""></image>

  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
// import coupon from '../../components/coolc-coupon/coolc-coupon';
import couponPage from '@/components/coolc-coupon/coolc-coupon';

export default {
  components: {
    // ...mapState(['city', 'tabList'])
    couponPage
  },
  computed: {
    ...mapState(['userInfo', 'token']),
  },
  data() {
    return {
      coupon: [{
        list: [{
          url: "/pages/brand/index/id/1",
          money: "150",
          title: "满2000减150元",
          ticket: "YMC_5c929fbf47235",
          seller_name: "百达翡丽官方旗舰店",
          end_time: "2019-04-20 01:51:20",
          state: "1"
        },
          {
            url: "/pages/brand/index/id/1",
            money: "50",
            title: "满1000减50元",
            ticket: "YMC_5c929fbf47235",
            seller_name: "百达翡丽官方旗舰店",
            end_time: "2019-04-20 01:51:20",
            state: "1"
          }]
      }],
      index: 0,
      current: '',
      page: 1,
      status: 'loadmore',
      list: [{
        'more_seats': 5,
        'statusText': '状态',
        'start_city': '广州',
        'start_name': '天河',
        'end_city': '结束城市',
        'end_name': '1212'
      }],
      timer1: null,
      timer2: null,
      timer3: null,
      flag: false,
      pid: 0,
      banner_lists: [],
      goodsDetail: '',
      listParams: {
        medicine_id: '',
        page: 1,
        limit: 10
      },
      couponList:[],
    }
  },
  onLoad(option) {
    this.pid = option.id
    uni.setStorageSync('pid', this.pid)
  },
  onShow() {
    // console.log("this.userInfo",this.userInfo.shop_id)
    this.getGoodsDetails(this.userInfo.shop_id)
    this.getMdeicineCouponList()
  },
  onUnload() {
    // clearInterval(this.timer1)
    // clearInterval(this.timer2)
    // clearInterval(this.timer3)
    // this.timer1 = null
    // this.timer2 = null
    // this.timer3 = null
  },
  onHide() {
    // clearInterval(this.timer1)
    // clearInterval(this.timer2)
    // clearInterval(this.timer3)
    // this.timer1 = null
    // this.timer2 = null
    // this.timer3 = null
  },
  onPullDownRefresh() {
    // this.page = 1
    // this.flag = false
    // this.list = []
    // if (this.current == 0) {
    // 	this.getList1()
    // } else if (this.current == 1) {
    // 	this.getList2()
    // }else if (this.current == 2) {
    // 	this.getList3()
    // }
    this.listParams.page = 1
    this.flag = false
    this.getMdeicineCouponList()
  },
  onReachBottom() {
    //避免多次触发
    if (this.status == 'loading' || this.status == 'nomore') {
    	return;
    }
    // if (this.current == 0) {
    // 	this.getList1()
    // } else if (this.current == 1) {
    // 	this.getList2()
    // }else if (this.current == 2) {
    // 	this.getList3()
    // }
  },
  // components: {},
  methods: {
    //代驾
    getList1() {
      this.flag = false
      this.status = "loading";
      this.$http('/addons/ddrive/order/takingList', {
        page: this.page,
        city: this.city
      }, "POST").then(res => {
        let data = res.data
        if (data.length < 10) {
          this.status = "nomore"
        } else {
          this.page = this.page + 1
          this.status = "loadmore"
        }
        this.list = this.list.concat(data)
        this.flag = true
        uni.stopPullDownRefresh();
      })
    },
    async getGoodsDetails(id) {
      this.$http('/api/mall/getMedicineDetail', {
        medicine_id: id
      }, "GET").then(res => {
        this.goodsDetail = res
      });
    },

    // 编辑商家
    toEditShop() {
      uni.navigateTo({
        url: "/pages/home/edit_shop?id=" + this.goodsDetail.id
      })
    },

    // 优惠券列表
    async getMdeicineCouponList() {
      this.flag = false
      this.status = "loading"
      this.listParams.medicine_id = this.userInfo.shop_id
      this.$http('/api/coupon/getMdeicineCouponList', this.listParams,"GET").then(res=>{

        if (res.length < 10){
          this.status = "nomore"
        }else {
          this.listParams.page = this.listParams.page + 1
          this.status = "loadmore"
        }
        if (this.listParams.page===1){
          this.couponList = res
        }else {
          this.couponList = this.couponList.concat(res)
        }
        // this.couponList = this.couponList.concat(res)
        this.flag = true
        setTimeout(()=>{
          uni.stopPullDownRefresh();
        },1500)
      })
    },

    //  上架/下架
    changeStatus(coupon_id){
      this.$http('/api/coupon/saveCouponStatus', {id:coupon_id},"POST").then(res=>{
        console.log(res)
        this.getMdeicineCouponList()
      })
    },

    //  新增优惠券
    toPublish(id){
      uni.navigateTo({
        url:"/pages/home/coupon/add-coupon?coupon_id=" + id + '&medicine_id=' + this.goodsDetail.id
      })
    },

  }
}
</script>

<style scoped lang="scss">
page {
  background: $bgcolor_white;
}

.coupon_box {
  width: 100%;
  height: auto;
  display: table;
  padding: 6upx 26upx 26upx 26upx;
}

.other_type {
  width: 100%;
  height: 90upx;
  padding-top: 50upx;

  .text {
    width: 100%;
    border-top: 1px solid #eeeeee;
    display: block;
    text-align: center;
    position: relative;
  }

  .text span {
    width: 180upx;
    height: 40upx;
    line-height: 40upx;
    color: #999999;
    display: block;
    background: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -90upx;
    margin-top: -20upx;
    font-size: $font-base;
  }
}

.scrollForbidden {
  overflow: hidden; /*有弹出层时禁止下层滑动*/
}

swiper {
  height: 175px;
}

.slide-image {
  width: 100%;
  height: 175px;
}

.name_wrapper {
  padding: 10px;
  background: #fff;
}

.name {
  //@include ellipsis(2);
  line-height: 40rpx;
  max-height: 80rpx;
  font-size: 32rpx;
  /* font-weight: bold; */
  font-weight: 500;
  color: #282936;
}

.coupon-item {
  width:100%; height:auto; display:table; border-radius:10upx; padding:0 20upx; margin-top:22upx; border:1px solid #eeeeee; position:relative;background-color: white;
  .coupon-money {
    width:465upx; height:auto; display:table; float:left; padding:26upx 0; border-style:none dotted none none; border-color:#eeeeee;

    .nick { width:100%; height:50upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
    .tit { width:100%; height:50upx; line-height:50upx; font-size:$font-sm; color:$font-color-999; }
    .demand { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }

    .layof { width:100%; height:48upx; line-height:30upx; font-size:44upx; color:#ff9000; font-weight:bold; }
    .end_time { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
  }
  .get-btn { width:146upx; height:52upx; line-height:50upx; position:absolute; top:50%; right:26upx; margin-top:-26upx; text-align:center; border-radius:60upx; color:#ff9000; border:1px solid #ff9000; font-size:$font-sm; float:right;}
}
.coupon-item:after { width:40upx; height:20upx; position:absolute; left:460upx; top:-1px; border-radius:0 0 40upx 40upx; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-top:0px; }
.coupon-item:before { width:40upx; height:20upx; position:absolute; left:460upx; bottom:-1px; border-radius:40upx 40upx 0 0; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-bottom:0px; }
</style>
